<template lang="html">
  <div class="TandetailedBox">
      <p>商家名：{{myData.name}}</p>
      <p>商家类型：{{myData.  typeNames}}</p>
      <p>商家logo：<img style="width:100px; height:100px;" :src="$store.state.url+'/v1/viewImg?path=images/'+myData.logo"></p>
      <p>所在地：{{myData.provideName}}、{{myData.cityName}}、{{myData.areaName}}</p>
      <p>详细地址：{{myData.address}}</p>
      <p>详细介绍：{{myData.remarks}}</p>
      <div class="detailedRight">
        <p class="green">商家编码:<span>{{myData.businessmenCode}}</span></p>
        <div id="canvas1" >
        </div>
        <el-button size="small" style="margin-top:60px;" @click="down">二维码下载</el-button>
      </div>
  </div>
</template>


<script>
import QRCode from 'qrcodejs2'
import axios from 'axios'
var url;

export default {
  data(){
    return {
      myData:{}
    }
  },
  methods:{
    down:function(){
      console.log(document.getElementById('canvas1').children[1].src);
      var type = 'png';
      var imgData = document.getElementById('canvas1').children[1].src;

      var saveFile = function(data, filename){
      var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
      save_link.href = data;
      save_link.download = filename;

      var event = document.createEvent('MouseEvents');
      event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
      save_link.dispatchEvent(event);
      };

      // 下载后的问题名
      var filename = this.myData.businessmenCode+ '' + this.myData.name;
      // download
      saveFile(imgData,filename);

    },
    useqrcode(code){
      new QRCode(document.getElementById('canvas1'),{
        width:500,
        height:500,
        text:'https://hupovip.cn/wx/code?shopCode='+code
      });

      // var qrcode = new QRCode(document.getElementById("canvas1"), {
      // 	width : 100,
      // 	height : 100
      // });
      // alert(qrcode)
      // var url='http://dev.hupovip.cn/hp/wx/api?shopCode='+code;
      // qrcode.makeCode(url);

      // var url='http://dev.hupovip.cn/hp/wx/api?shopCode='+code;
      // var canvas = document.getElementById('canvas');
      // QRCode.toCanvas(canvas, url, function (error) {
      // if (error) console.error(error)
      // console.log('success!');
      // })


    },
    getDetailde:function (){
      var that=this;
      axios.get(url+'/v1/businessmen/gets/businessmen/findById',{
        params:{
          id:that.$store.state.TanMerchants.id
        }
      }).then((res)=>{
        if(res.data.code==0){
          var data=res.data.data;
          that.myData=res.data.data;
          that.useqrcode(data.businessmenCode);
        }else{
          that.$message({
            showClose: true,
            message: res.data.msg,
            type: 'error'
          });
        }
      }).catch((err)=>{
        console.log(err);
      })
    }
  },
  computed:{
    getId(){
      return this.$store.state.TanMerchants.id
    }
  },
  watch:{
    getId(val) {
      this.getDetailde();
      document.getElementById('canvas1').innerHTML="";
    }
  },
  created(){
    url=this.$store.state.url;
    this.getDetailde();
  }
}
</script>

<style lang="Sass" scoped>
.TandetailedBox{ position: relative;
  p{text-align: left; margin-bottom: 10px; width: 60%; font-size: 13px;}
  .detailedRight{position: absolute; right: 0px; top: 0px;
    p{width: 100%; font-size: 13px; line-height: 50px; border-bottom: 1px solid #EEEEEE;
      span{font-size: 16px;}
    }
  }
  #canvas1{
    width: 160px;
    height: 160px;
    margin-left: -70px;
    margin-top: -50px;
    transform:scale(0.3,0.3);
    -ms-transform:scale(0.3,0.3); 	/* IE 9 */
    -moz-transform:scale(0.3,0.3);	/* Firefox */
    -webkit-transform:scale(0.3,0.3); /* Safari 和 Chrome */
    -o-transform:scale(0.3,0.3); 	/* Opera */
  }
}
</style>
